<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Point 计数器</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			margin: 0;
		}

		button {
			font-size: 18px;
			padding: 10px 20px;
			cursor: pointer;
		}

		#pointValue {
			font-size: 24px;
			margin-bottom: 20px;
		}
	</style>
</head>

<body>
	<div id="pointValue">Point: 0</div>
	<button id="incrementButton">点击加 1</button>

	<script>
		// 页面加载时获取初始 point 值
		function getPoint() {
			fetch('/getPoint')
				.then(response => response.json())
				.then(data => {
					document.getElementById('pointValue').textContent = `Point: ${data.point}`;
				})
				.catch(error => console.error('获取 point 值失败:', error));
		}

		// 点击按钮时增加 point 值
		document.getElementById('incrementButton').addEventListener('click', function () {
			fetch('/incrementPoint', {
				method: 'GET'
			})
			.then(response => response.json())
			.then(data => {
				document.getElementById('pointValue').textContent = `Point: ${data.point}`;
			})
			.catch(error => console.error('增加 point 值失败:', error));
		});

		// 页面加载时获取初始值
		getPoint();
	</script>
</body>

</html>